<template>
  <div
    class="diqu"
    v-show="!isQuxian"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="biaoti">分地区监督覆盖率</div>
    <div id="diqu_echart" style="width: 100%;height:calc( 100% -  3.125rem);">加载中</div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getFuGaiLv, getFuGaiLv2 } from "@/api/gaikuang";

export default {
  name: "fugailv",
  data() {
    return {
      loading: true,
      diquData: [0, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
      isQuxian: false
    };
  },
  methods: {
    async getJson() {
      this.loading = true;
      // try {
      var json = (
        await getFuGaiLv({ year: this.$store.state.YEAR, areaCode: 131000 })
      ).data.data;
      // } catch (error) {
      //   var json = [
      //     {
      //       orgName: "廊坊市",
      //       rateCoverage: "0.9142",
      //       orgCode: "131000"
      //     },
      //     {
      //       orgName: "安次区",
      //       rateCoverage: "0.9944",
      //       orgCode: "131002"
      //     },
      //     {
      //       orgName: "广阳区",
      //       rateCoverage: "0.9602",
      //       orgCode: "131003"
      //     },
      //     {
      //       orgName: "固安县",
      //       rateCoverage: "0.9767",
      //       orgCode: "131022"
      //     },
      //     {
      //       orgName: "永清县",
      //       rateCoverage: "0.9614",
      //       orgCode: "131023"
      //     },
      //     {
      //       orgName: "香河县",
      //       rateCoverage: "0.9534",
      //       orgCode: "131024"
      //     },
      //     {
      //       orgName: "大城县",
      //       rateCoverage: "0.9791",
      //       orgCode: "131025"
      //     },
      //     {
      //       orgName: "文安县",
      //       rateCoverage: "0.9814",
      //       orgCode: "131026"
      //     },
      //     {
      //       orgName: "大厂回族自治县",
      //       rateCoverage: "1.0072",
      //       orgCode: "131028"
      //     },
      //     {
      //       orgName: "霸州市",
      //       rateCoverage: "0.9450",
      //       orgCode: "131081"
      //     },
      //     {
      //       orgName: "三河市",
      //       rateCoverage: "0.9970",
      //       orgCode: "131082"
      //     }
      //   ];
      // }
      json.forEach(val => {
        switch (val.orgName) {
          case "廊坊市":
            this.diquData[0] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "安次区":
            this.diquData[1] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "广阳区":
            this.diquData[2] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "固安县":
            this.diquData[3] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "永清县":
            this.diquData[4] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "香河县":
            this.diquData[5] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "大城县":
            this.diquData[7] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "文安县":
            this.diquData[6] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "大厂回族自治县":
            this.diquData[8] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "霸州市":
            this.diquData[9] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          case "三河市":
            this.diquData[10] =
              (val.rateCoverage * 100).toFixed() > 100
                ? "100"
                : (val.rateCoverage * 100).toFixed();
            break;
          default:
            break;
        }
      });
      this.loading = false;
      this.drawLine();
    },
    drawLine() {
      let height = document.body.clientHeight;
      var fugaishu = this.diquData;
      var baiData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
      var diming = [
        "市辖区",
        "安次区",
        "广阳区",
        "固安县",
        "永清县",
        "香河县",
        "文安县",
        "大城县",
        "大厂回族自治县",
        "霸州市",
        "三河市"
      ];
      if (height < 770) {
        baiData = baiData.slice(0, 6);
        fugaishu = fugaishu.slice(0, 6);
        diming = diming.slice(0, 6);
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("diqu_echart"));
      this.diqu = myChart;
      // 绘制图表
      let option = {
        grid: {
          left: "10%",
          top: "0%",
          right: "2%",
          bottom: "0%",
          containLabel: true
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            axisTick: "none",
            axisLine: "none",
            // offset: "10",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12"
              }
            },
            data: diming.reverse()
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "#07ccff",
                fontSize: "12"
              },
              formatter: function(val) {
                return `${val}%`;
              }
            },
            data: fugaishu
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: function(e) {
            if (e.seriesIndex === 0) {
              return `${e.name}: ${e.value}%`;
            }
          }
        },
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: fugaishu.reverse(),
            barWidth: 8,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#6dcc54"
                  }, //柱图渐变色
                  {
                    offset: 0.5,
                    color: "#3acc9b"
                  }, //柱图渐变色
                  {
                    offset: 1,
                    color: "#00cffc"
                  } //柱图渐变色
                ])
              }
            },
            z: 1
          },
          {
            name: "外框",
            type: "bar",
            // barGap: '-100%',
            // barCateGoryGap:50,
            yAxisIndex: 1,
            data: baiData,
            barWidth: 8,
            itemStyle: {
              normal: {
                color: "#36335e"
              }
            },
            z: 0
          }
        ]
      };
      myChart.setOption(option);
      myChart.resize();
    }
  },
  mounted() {},
  created() {
    this.getJson();
    Bus.$on("changeSize", e => {
      // this.diqu.resize();
      this.drawLine();
    });
    Bus.$on("isQuxian", e => {
      this.isQuxian = e;
    });
    Bus.$on("AreaItem", e => {
      this.areaCity = e;
      if (this.isQuxian) {
      } else {
      }
    });
  }
};
</script>

<style scoped lang="less">
.diqu {
  border: 0.0625rem solid #2c4daa;
  line-height: 3.125rem;

  .biaoti {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
  }

  #diqu_echart {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(120deg, #155799, #159957);
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    animation: bgp 3s infinite linear;
    canvas {
      height: 100% !important;
    }
  }
}
</style>